<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .ele{width:20px;height:20px;background: black;color: #fff;text-align: center;line-height: 20px;position: absolute;left: 0;top: 0;}
  </style>
</head>
<body>
</body>
<script>

  document.onmousemove = function(eve){
    var e = eve || window.event;
    // 先获取页面上是否存在要跟随鼠标的元素
    var eles = document.querySelectorAll(".ele");
    // 如果不存在
    if(eles.length < 1){
      // 就创建
      for(var i=0;i<10;i++){
        var div = document.createElement("div");
        document.body.appendChild(div);
        div.className = "ele";
        div.innerText = i;
      }
    }
    // 设置每个元素的具体位置：
    // 先依次操作后一个元素，设置为前一个元素的位置
    for(var i=eles.length-1; i>0; i--){
      eles[i].style.left = eles[i-1].offsetLeft + "px";
      eles[i].style.top = eles[i-1].offsetTop + "px";
    }
    // 最后将第0个元素的位置设置为鼠标的坐标
    eles[0].style.left = e.pageX + "px";
    eles[0].style.top = e.pageY + "px";

  }



  
</script>
</html>